import React, { Component } from 'react'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default class App extends Component {
	初始化状态
	state = {
		todos: [
			{ id: '1', name: '吃饭', done: false },
			{ id: '2', name: '睡觉', done: true },
			{ id: '3', name: '敲代码', done: true },
		],
	}

	// addTodo用于添加一个todo,接受的参数是todo对象
	addTodo = (todoObj) => {
		console.log(todoObj)
		const newTodos = [todoObj, ...this.state.todos]

		this.setState({
			todos: newTodos,
		})
	}
	// 用于更新一个todo对象
	upDateToDo = (id, done) => {
		// 获取状态中的todos
		const { todos } = this.state
		// 匹配处理数据
		const newtodos = todos.map((todoObj) => {
			if (todoObj.id === id) return { ...todoObj, done: done }
			else return todoObj
		})
		this.setState({
			todos: newtodos,
		})
	}
	// 删除todo
	deleteToDo = (id) => {
		const { todos } = this.state
		const newtodos = todos.filter((todo) => {
			return todo.id !== id
		})
		this.setState({
			todos: newtodos,
		})
	}
	// checkAllToDo用于全选
	checkAllToDo = (done) => {
		// 获取原来的todos
		const { todos } = this.state
		// 加工数据
		const newtodos = todos.map((todoObj) => {
			return { ...todoObj, done }
		})

		// 更新状态
		this.setState({
			todos: newtodos,
		})
	}
	// 清楚所有已完成的todo
	clearAllDone = () => {
		const { todos } = this.state

		const newtodos = todos.filter((todo) => {
			return todo.done !== true
		})
		this.setState({
			todos: newtodos,
		})
	}

	render() {
		const { todos } = this.state
		return (
			<div>
				<div className="todo-container">
					<div className="todo-wrap">
						<Header addTodo={this.addTodo} />
						<List
							todos={todos}
							upDateToDo={this.upDateToDo}
							deleteToDo={this.deleteToDo}
						/>
						<Footer
							todos={todos}
							checkAllToDo={this.checkAllToDo}
							clearAllDone={this.clearAllDone}
						/>
					</div>
				</div>
			</div>
		)
	}
}
